<div data-dojo-type="${baseClass}"
    data-dojo-attach-point="focusNode">

    <div data-dojo-type="dijit/layout/BorderContainer"
        data-dojo-props="gutters: false"
        style="width: 100%; height: 400px">


        <div data-dojo-type="ngw-pyramid/form/CodeMirror"
            data-dojo-attach-point="widgetBody"
            data-dojo-props="region: 'center', lineNumbers: true, lang: 'css'"
            style="height: 100%; border: 1px solid #999;"></div>

        <div data-dojo-type="dijit/layout/ContentPane"
            data-dojo-props="region: 'right'"
            style="max-width: 20em; padding-left: 1em;">
            <p style="margin: 0;">{{gettext 'Enter custom CSS rules here. They will be used to redefine styles, design for all pages of your Web GIS.'}}</p>
        </div>

        <div data-dojo-type="dijit/layout/ContentPane"
            data-dojo-props="region: 'bottom'"
            style="padding: 1em 0;">
            <button data-dojo-type="dijit/form/Button" 
                data-dojo-attach-point="buttonSave"
                class="dijitButton--primary">{{gettext 'Save'}}</button>
        </div>

    </div> 

</div>
